<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>




    <script>
        const createDOMFromString = domString => {
          const div = document.createElement('div');
          div.innerHTML = domString;
          return div;
        };

        class LinkButton {
          constructor() {}

          el = undefined;
          state = undefined;
          onStateChange = undefined;
          state = {
            isLiked: false,
          };

          setState(state) {
            const oldEl = this.el;
            this.state = state;
            this.el = this.render();
            this.onStateChange && this.onStateChange(oldEl, this.el);
          }

          changeLikeText() {
            this.setState({
              isLiked: !this.state.isLiked,
            });
          }

          render() {
            this.el = createDOMFromString(`
                        <button class='like-btn'>
                            <span class='like-text'>${
                              this.state.isLiked ? '取消' : '点赞'
                            }</span>
                            <span>👍</span>
                        </button>
                        `);

            this.el.addEventListener('click', this.changeLikeText.bind(this));
            return this.el;
          }
        }

        const likeButton = new LinkButton();
        document.body.append(likeButton.render());
        likeButton.onStateChange = (oldEl, newEl) => {
          document.body.insertBefore(newEl, oldEl);
          oldEl.remove();
        };
    </script>
</body>

</html>